<template>
  <div class='container'>
    <el-card class="main">
      <!-- 顶部工具栏 -->
      <div class="header">
        <!-- 左边 -->
        <el-row type="flex" justify="space-between">
          <el-row type="flex" align="middle" >
            <el-col class="text">关键字</el-col>
            <el-col>
              <el-input style="width:380px" v-model="searchValue"  @keyup.enter.native="serchClick" placeholder="根据编号搜索"></el-input>
            </el-col>
          </el-row>
          <!-- 右边 -->
          <el-row type="flex">
            <el-col>
              <el-button style="margin-right:15px" size="small" @click="searchValue = ''">清楚</el-button>
            </el-col>
            <el-col>
              <el-button type="primary" size="small" @click="serchClick">搜索</el-button>
            </el-col>
          </el-row>
        </el-row>
      </div>
      <!-- 提示 -->
      <el-alert
      type="info"
      class="alertInfo"
      show-icon
      :closable="false"
      >
      <template #title>
        数据一共{{ counts }}条
      </template>
    </el-alert>
    <!-- 主体表格 -->
    <el-table
    :data="tableData"
    style="width: 100%"
    v-loading.fullscreen="tableLoading"
    >
    <el-table-column
      prop="id"
      label="编号"
      align="middle"
      width="190"
    >
    </el-table-column>
    <el-table-column
      prop="questionType"
      label="题型"
      width="100"
    >
    <template slot-scope="{ row }">
        {{ types(row.questionType)}}
    </template>
    </el-table-column>
    <el-table-column
      prop="date"
      label="题目编号"
      width="190"
    >
    <template slot-scope="{ row }">
        <div
        style="color:#0099ff;cursor: pointer; height: 20px;margin-top: 5px"
        v-for="item in row.questionIDs"
        :key="item.number"
        @click="previewClick(item)"
        >
          {{ item.number }}
        </div>
    </template>
    </el-table-column>
    <el-table-column
      prop="addTime"
      label="录入时间"
      width="180"
    >
    </el-table-column>
    <el-table-column
      prop="totalSeconds"
      label="答题时间(秒)"
    >
    </el-table-column>
    <el-table-column
      prop="accuracyRate"
      label="正确率(%)"
    >
    </el-table-column>
    <el-table-column
      prop="userName"
      label="录入人"
      >
    </el-table-column>
    <el-table-column
      prop="address"
      label="操作"
      >
      <!--  -->
      <template slot-scope="{row}">
       <i @click="delClick(row)" class="el-icon-delete delete"></i>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <el-row type="flex" justify="end" class="pagination">
    <el-pagination
      background
      :page-sizes="[20, 40, 60, 100]"
      :page-size="20"
      layout="total,  prev, pager, next,sizes, jumper"
      :total="counts"
      @current-change="changePage"
      @size-change="changeSize"
      >
    </el-pagination>
  </el-row>
    </el-card>
    <!-- 弹窗详情 -->
    <PreviewQuestion
    :showDialog.sync="showDialog"
    :questionDetail.sync="questionDetail"
    />
  </div>
</template>

<script>
// 组题列表的接口
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions.js'
// 常量
import { questionType } from '@/api/hmmm/constants.js'
import PreviewQuestion from '@/components/PreviewQuestion/index.vue'
export default {
  name: 'QuestionsRandoms',
  components: { PreviewQuestion },
  data () {
    return {
      questionType,
      searchValue: '',
      tableData: [],
      page: {
        page: 1,
        pagesize: 20,
        keyword: ''
      },
      counts: 0,
      tableLoading: false,
      showDialog: false,
      questionDetail: {},
      searchShow: false// 搜索的内容的状态
    }
  },
  created () {
    this.randoms()
  },
  methods: {
    async randoms () {
      this.tableLoading = true
      try {
        const { data } = await randoms(this.page)
        this.tableData = data.items
        this.counts = data.counts
        this.tableLoading = false
        // console.log(data)
      } catch (err) {
        this.tableLoading = false
      }
    },
    // 处理题型
    types (val) {
      const obj = this.questionType.find(item => item.value === +val)
      return obj ? obj.label : '未知'
    },
    // 页码变化
    changePage (newPage) {
      this.page.page = newPage
      if (this.searchShow) {
        // 如果是true 则调佣搜索的内容
        this.serchClick()
      } else {
        this.randoms()
      }
    },
    // 每页展示多少数据变化
    changeSize (newSize) {
      this.page.pagesize = newSize
      if (this.searchShow) {
        this.serchClick()
      } else {
        this.randoms()
      }
    },
    // 点击删除
    async delClick (row) {
      console.log(row)
      try {
        await this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await removeRandoms(row)
        this.$message.success('删除题组成功')
        this.randoms()
      } catch (err) {
        console.log(err)
      }
    },
    // 点击预览
    async previewClick (row) {
      this.showDialog = true
      // console.log(row)
      const { data } = await detail(row)
      this.questionDetail = data
      // console.log(data)
    },
    // 点击搜索
    async serchClick () {
      if (this.searchValue.trim()) {
        this.tableLoading = true
        this.searchShow = true
        try {
          const { data } = await randoms({ ...this.page, keyword: this.searchValue })
          this.tableData = data.items
          this.counts = data.counts
          this.tableLoading = false
        // console.log(data)
        } catch (err) {
          this.tableLoading = false
        }
      } else {
        this.searchShow = false
        this.randoms()
      }
    }
  },
  computed: {

  },
  mounted () {

  }
}
</script>

<style  lang='scss'>
.main {

  margin: 10px;
  .text {
    width: 80px;
    margin-left: 20px;
    font-size: 14px;
    font-weight: 700;
  }
  .alertInfo {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .delete {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    text-align: center;
    line-height: 32px;
    border: 1px solid #facece;
    background-color: #fef0f0;
    color: red;
    font-size: 12px;
    &:hover {
      background-color: #f56c6c;
      color: #fff;
    }
  }

 .el-table th.el-table__cell.is-leaf{
    background-color: #fafafa !important;
    border-bottom: 2px solid #e8e8e8;
  }
  .pagination {
    margin-top: 15px;
  }
}
.questions {
  margin-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}
.remarks {
  border: none;
}
.questionMain {
  .title {
    color: blue;
    margin: 10px 0;
  }
}
</style>
